<template>
    <div>
        <!-- 二级导航 -->
        <div class="ui attached pointing menu">
            <div class="ui container" style="padding:0em 2em !important">
                <div class="right menu">
                    <router-link class="teal active item" to="/admin/add">
                        <a>发布</a>
                    </router-link>
                    <router-link class="item" to="/admin/index">
                        <a>管理</a>
                    </router-link>
                </div>
            </div>
        </div>
        <!-- 中间部分 -->
        <div class="ui container m-padding-tb-big" style="padding:1em 2em !important" id="app">
            <form action="#" class="ui form segment" method="POST">
                <!-- 标题输入行 -->
                <div class="field">
                    <div class="ui left labeled input">
                        <div class="ui teal compact selection dropdown my label">
                            <input type="heddin" value="原创">
                            <div class="text">原创</div>
                            <i class="dropdown icon"></i>
                            <div class="menu">
                                <div class="item" data-value="原创">原创</div>
                                <div class="item" data-value="转载">转载</div>
                                <div class="item" data-value="翻译">翻译</div>
                            </div>
                        </div>
                        <input type="text" placeholder="标题">
                    </div>
                </div>
                <!-- 内容输入行 -->
                <div class="field">

<!--                    <mavon-editor-->
<!--                            v-model="markdownValue"-->
<!--                            :ishljs = "true"-->
<!--                            ref="editor"-->
<!--                            @save="saveDoc"-->
<!--                            @change="updateDoc"-->
<!--                            @imgAdd="addImg"-->
<!--                            @imgDel="delImg"-->
<!--                            :scrollStyle=true-->
<!--                            codeStyle="atom-one-dark"-->
<!--                    ></mavon-editor>-->
                </div>
                <!-- 简介输入行 -->
                <div class="field">
                    <textarea name="" id="" cols="" rows="4" placeholder="文章简介"></textarea>
                </div>
                <!-- 类别选择行  分为左右两个部分 左边类型和标签选择 右边首图地址输入-->
                <div class="two fields">
                    <!-- 左边类型和标签选择 -->
                    <div class="field">
                        <div class="ui left labeled action input">
                            <label class="ui compact teal label">分类</label>
                            <div class="ui selection fluid multiple search  dropdown">
                                <input type="hidden" placeholder="" name="types">
                                <i class="icon dropdown"></i>
                                <div class="default text">分类</div>
                                <div class="menu">
                                    <div class="item" data-value="1">开发者手册</div>
                                    <div class="item" data-value="2">错误日志</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="field">
                        <div class="ui left  labeled action input">
                            <label class="ui compact teal label">标签</label>
                            <div class="ui selection fluid multiple search dropdown">
                                <input type="hidden" placeholder="" name="tags">
                                <i class="icon dropdown"></i>
                                <div class="default text">标签</div>
                                <div class="menu">
                                    <div class="item" data-value="1">java</div>
                                    <div class="item" data-value="2">Spring boot</div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
                <!-- 底部行 -->
                <div class="two fields">
                    <!-- 左侧 功能按钮 -->
                    <div class="field">
                        <div class="ui four column grid">
                            <div class="column">
                                <div class="ui teal basic button checked checkbox" style="width: 100% !important;">
                                    <input type="checkbox" name="recommend" checked id="recommend">
                                    <label for="recommend">推荐</label>
                                </div>
                            </div>
                            <div class="column">
                                <div class="ui teal basic button checkbox" style="width: 100% !important;">
                                    <input type="checkbox" name="shareInfo" id="shareInfo" class="ui mini">
                                    <label for="shareInfo">转载</label>
                                </div>
                            </div>
                            <div class="column">
                                <div class="ui teal basic button checkbox" style="width: 100% !important;">
                                    <input type="checkbox" name="appreciation" id="appreciation">
                                    <label for="appreciation">赞赏</label>
                                </div>
                            </div>
                            <div class="column">
                                <div class="ui teal basic button checkbox" style="width: 100% !important;">
                                    <input class="ui teal" type="checkbox" name="comment" id="comment">
                                    <label for="comment"> 评论</label>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- 首图地址输入框 -->
                    <div class="field">
                        <div class="ui left labeled input">
                            <label class="ui teal label">首图</label>
                            <input type="text" placeholder="首页图片地址" name="indexPicture">
                        </div>
                    </div>
                </div>
                <!-- 按钮栏 -->
                <div class="ui container right aligned">
                    <button type="button" class="ui button" onclick="window.history.go(-1)">返回</button>
                    <button type="submit" class="ui button">保存</button>
                    <button type="submit" class="ui teal button">发布</button>
                </div>
            </form>
        </div>
    </div>

</template>

<script>

    export default {
        name: "Add",
        data() {
            return {
                markdownValue: '',
                imgs: []
            }
        },
        mounted() {
            console.log($(this.$el).find('.ui.dropdown'))
            // 控制类别下拉菜单
            $(this.$el).find('.ui.dropdown').dropdown({
                on: "hover"
            })
        },
        methods: {
            // eslint-disable-next-line no-unused-vars
            updateDoc(markdown, html) {
                // 此时会自动将 markdown 和 html 传递到这个方法中
                console.log("markdown内容: " + markdown);
                console.log("html内容:" + markdown);
            },
            saveDoc(markdown, html) {
                // 此时会自动将 markdown 和 html 传递到这个方法中
                console.log("markdown内容:" + markdown);
                console.log("html内容:" + html);
            },
            addImg(pos, file) {
                let formData=new FormData();     //新建一个表单数据,用于提交文件
                formData.append("img",file);     //添加文件,参数分别是表单参数的名字和值.
                this.$http.post("/api/edit/uploadImg",formData,{     //使用Axios进行上传图片
                    headers:{
                        "Content-Type":"multipart/form-data"    //设置请求头,更换内容类型为表单数据
                    }
                }).then((response)=>{     //传输之后将url替换
                    let data=response.data;     //data为响应返回的数据
                    if(data.message=="no signIn"){     //如果还没有登陆
                        this.$router.push("/user/signIn")     //路由跳转
                    }else{     //否则
                        this.$refs.md.$img2Url(pos,data.url);     //将原来的图片url替换成data.url,注意$img2Url是自带的函数.
                    }
                });
                this.imgs[pos] = file;     //记录图片.
            },
            delImg(pos) {
                pos=pos[0];     //首先获取到图片的原来的url
                this.$http.post("/api/edit/deleteImg?imgId="+pos);     //通过Axios删除图片
                delete this.imgs[pos];     //删除之前记录的图像字典中的数据
            }
        }
    }
</script>

<style lang="less" scoped>

    .mavonEditor {
        width: 100%;
        height: 100%;
    }

</style>
